<template>
  <div class="mainBox">
    <mt-tab-container>
    <router-view></router-view>
    </mt-tab-container>



    <mt-tabbar v-model='selected' fixed >
      <router-link to="/" exact active-class="active" class="tab">
            <mt-tab-item id="home" >
              <img slot="icon" src="./assets/logo.png">
                首页
            </mt-tab-item>
        </router-link>

        <router-link to="/news" active-class="active" class="tab">
            <mt-tab-item id="2">
              <img slot="icon" src="./assets/logo.png">
                新闻
            </mt-tab-item>
        </router-link>

        <router-link to="/project" active-class="active" class="tab">
            <mt-tab-item id="3">
              <img slot="icon" src="./assets/logo.png">
                产品
            </mt-tab-item>
        </router-link>

        <router-link to="/shopcar" active-class="active" class="tab">
            <mt-tab-item id="4">
              <img slot="icon" src="./assets/logo.png">
                购物车
            </mt-tab-item>
        </router-link>

        <router-link to="/my" active-class="active" class="tab">
            <mt-tab-item id="5">
              <img slot="icon" src="./assets/logo.png">
                我的
            </mt-tab-item>
        </router-link>

    </mt-tabbar>

  </div>

</template>

<script>
import Home from './components/Home';
export default {

  data () {
    return {
     selected:'home'
    }
  },
  methods:{
    
  }

}
</script>

<style>
.tab{
  width: 25%;
}
.mainBox{
  /* display: flex;
  flex-direction: column; */
}
.mint-tab-container{
  /* padding-bottom:55px; */
}
.mint-tabbar{

}
</style>
